<template>
  <view>
    <mk-goods-list :goods="skillCommoditys" @clickItem="goodsItem"></mk-goods-list>
    <uni-load-more v-show="this.skillCommoditys.length>=this.queryParams.pageSize" :status="status" />
  </view>
</template>

<script>

import {skillService} from "../../../api/buyer/public/skill";
import {BASE_IMG_URL} from "../../../api/service";
import {attachmentService} from "../../../api/buyer/public/attachmentService";
export default {
  data() {
    return {
      skillCommoditys:[

      ],
      queryParams:{
        currentPage:1,
        pageSize:15,
        filters:{
          endDate:new Date()
        }
      },
      status:"more"
    }
  },
  created() {
    this.init("load")
  },
  //页面关闭时触发
  destroyed() {

  },
  async onReachBottom() {
    // console.log("onReachBottom");
    if(this.status!="no-more"){
      this.queryParams.currentPage+=1;
      this.status="loading";
      this.init("loadMore")
    }
  },
  methods: {
    init(type){
      this.queryParams.filters.endDate=this.formatDate(new Date())
      console.log( this.queryParams.filters.endDate)
      if(type=="load"){
        this.queryParams.currentPage=1
        this.skillCommoditys=[]
      }
      skillService.findSkillCommoditys(this.queryParams).then((res)=>{
        let resDate=res.data.datas;
        let s=this.skillCommoditys.length;
        if(resDate.length&&resDate.length!=0){
          res.data.datas.forEach((data)=>{
            let tempCommodiy={
              id:data.commodityId,
              eid:data.eid,
              name:"Commodity",
              img:"",
              title:data.commodityName,
              littleTitle:"开始时间:"+data.startDate,
              amount:"￥"+data.price,
              label:"库存："+data.stock,
            }
            this.skillCommoditys.push(tempCommodiy);
          })
          let e=this.skillCommoditys.length;
          this.loadImage(s,e)
          this.status="more";
        }else{
          this.status="no-more"
        }
      }).catch( e=> {
        this.status="more";
      })
    },
    formatDate(date) {
      const y =  date.getFullYear();
      const M =  ('0' + (date.getMonth() + 1)).substr(-2);
      const d =  ('0' + date.getDate()).substr(-2);
      const h =  ('0' + date.getHours()).substr(-2);
      const m =  ('0' + date.getMinutes()).substr(-2);
      const s =  ('0' + date.getSeconds()).substr(-2);
      return `${y}-${M}-${d} ${h}:${m}:${s}`;
    },
    loadImage(s,e){
      for (let i = s; i < e; i++) {
        if (!this.skillCommoditys[i].img) {
          if (this.skillCommoditys[i].id && this.skillCommoditys[i].name) {
            attachmentService.findFile(this.skillCommoditys[i].id, this.skillCommoditys[i].name).then((res) => {
              this.skillCommoditys[i].img = BASE_IMG_URL + res.data[0].attachmentAddr
              // console.log(this.skillCommoditys)
              // this.reloadImag()
            })
          }
        }
      }
      // this.skillCommoditys.forEach(good => {
      //
      // })
    },
    goodsItem(item){
      uni.navigateTo({
        url: '/pages/buyer/Skill/skillDetailed?id=' + encodeURIComponent(JSON.stringify(item.eid)),
        // url: '/pages/staff/application/production/taskList/task-detail'
      })
    }
  },

  onShow() {

  },
}
</script>

<style scoped>
.demo-layout {
  height: 100rpx;
  border-radius: 8rpx;
  text-align: center;
  padding: 10rpx;
  box-shadow: 0px 0 60rpx #F7F8F7 !important;
  padding: 10rpx;
  border-radius: 20rpx;
  background-color: #ef0a0a;
}

.main-statistics {
  width: 92%;
  height: 180rpx;
  margin: 20rpx auto auto;
  background-color: white
}

.current-shipping-content {
  width: 100%;
  min-height: 300rpx;
  height: auto;
  margin-top: 20rpx;
  /*background-color: white;*/
  padding-bottom: 50rpx;
}

.textColor {
  color: #a0a1aa;
  font-size: 24rpx;
}

/deep/ .u-tag {
  padding: 4rpx 10rpx
}

/deep/ .u-card__head {
  padding: 0px !important;
}

/deep/ .u-card__body {
  padding: 0px !important;
}

/deep/ .u-card__foot {
  padding: 0px !important;
}

.u-row {
  margin: 10rpx 0;
}

.shipping-card {
  /*padding:10px;*/
  box-shadow: 0px 0 60rpx #F7F8F7 !important;
}

/deep/ .shipping-card .u-row {
  padding: 4rpx;
}
</style>
<style>
page {
  background-color: #F7F8F7;
}

.title {
  font-weight: 600;
  margin-left: 10rpx;
  border-left: #10aeff solid 10rpx;
  padding-left: 10rpx;
  font-size: 15px;
}

.u-card {
  padding: 20rpx;
  border-radius: 40rpx !important;
  font-size: 28rpx;
}
</style>
